<template>
  <div class="page">
    <div class="ta-c pd-xxl c-gray" v-if="!isLoading && groups.length == 0">
      暂未加入任何班级！
    </div>

    <div v-if="!isLoading && groups.length > 0" v-for="(n, i) in groups" :key="i" class="weui-cells weui-cells_after-title mgb-s v-mdl">
      <navigator :url="'/pages/group-index/main?groupId=' + n.id" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <div class="weui-cell__hd" v-if="n.avatarUrl">
          <div style="width: 40px;">
            <avatar :src="n.avatarUrl"></avatar>
          </div>
        </div>
        <div class="weui-cell__bd pdl">
          <span v-if="n.name">{{n.name}}</span>
          <open-data v-else class="fs-l" type="groupName" :open-gid="n.openGroupId"></open-data>
        </div>
        <div class="weui-cell__ft weui-cell__ft_in-access avatars fs-xxs">
        </div>
      </navigator>
    </div>
    <page-common></page-common>
  </div>
</template>

<script>
import Avatar from '@/components/avatar'
import PageCommon from '@/components/page-common'
import { mapGetters, mapActions } from 'vuex'
import base from '@/mixins/base'

export default {
  mixins: [base],
  data () {
    return {
      isLoading: true
    }
  },
  components: {
    PageCommon,
    Avatar,
  },
  computed: {
    ...mapGetters([
      'role'
    ]),
    ...mapGetters('group', [
      'groups'
    ])
  },
  async onPullDownRefresh() {
    try {
      await this.getMyRelates()
      wx.stopPullDownRefresh()
    } catch (e) {
      this.$debug({err: e})
    }
  },
  methods: {
    async loginBack () {
      try {
        await this.getMyRelates()
        this.isLoading = false
      } catch (e) {
        this.$debug({err: e})
      }
    },
    ...mapActions('group', [
      'getMyRelates'
    ])
  }
}
</script>

<style scoped lang="less">
</style>
